<template>
  <span class="text-lg  pt-3">
    {{ timer.year }}年
    {{ timer.month }}月
    {{ timer.date }}日{{ timer.hours }}
    时{{ timer.minutes }}分
    <!-- {{ timer.seconds }}秒 -->
    <b style="font-size: 26px;margin-right:3px">{{ timer.seconds }}</b>秒
  </span>
  <!-- <span class="text-lg  pt-3">
    <b style="font-size: 36px;">{{ timer.year }}</b>年
    <b style="font-size: 36px;">{{ timer.month }}</b>月
    <b style="font-size: 36px;">{{ timer.date }}</b>日
    <b style="font-size: 36px;">{{ timer.hours }}</b>时
    <b style="font-size: 36px;">{{ timer.minutes}}</b>分
    <b style="font-size: 36px;">{{ timer.seconds }}</b>秒</span> -->
</template>
  
<script name="clock">  
  export default {
    setup() {
      const timer = reactive({})
      const ymd = ref('');
      const time = ref('');
      const interval = ref(null)
      
      // 更新当前时间
      const updateTime = () => {
        const now = new Date();
        time.value = now.toLocaleTimeString(); // 格式为hh:mm:ss
        ymd.value = now.toLocaleDateString()

        timer.year = now.getFullYear();
        timer.month = now.getMonth() + 1;
        timer.date = now.getDate();

        timer.hours = now.getHours();
        timer.minutes = now.getMinutes();
        timer.seconds = now.getSeconds();


        // console.log(now.toLocaleString())
        // console.log(new Date().toLocaleDateString('zh-CN', {
        //   // weekday: 'long',
        //   year: 'numeric',
        //   month: 'long',
        //   day: 'numeric'
        // }))

        // "18日 下午12:21:29"
        // console.log(new Date().toLocaleTimeString('zh-CN', {
        //   timeZone: 'Asia/Shanghai',  
        //   hour12: true,
        //   day: 'numeric'
        // }))
      };
      
      // 组件挂载后启动定时器
      onMounted(() => {
        updateTime();
        interval.value = setInterval(updateTime, 1000);
      });
              
      // 清理定时器，防止内存泄漏
      onUnmounted(() => {
        clearInterval(interval.value);
      });
      
      return {
        timer,
        ymd,
        time,
      };
    },
  };
</script>